<template>
  <div class="profile">
    <nav-bar class="profile-bar">
      <template slot="center">我的</template>
    </nav-bar>
    <profile-header></profile-header>
    <profile-info></profile-info>
    <profile-options :infos="orderList"></profile-options>
    <profile-options :infos="serviceList"></profile-options>
  </div>
</template>

<script>
import NavBar from "@/components/common/navbar/NavBar.vue";

import ProfileHeader from "./childProfile/ProfileHeader.vue";
import ProfileInfo from "./childProfile/ProfileInfo.vue";
import ProfileOptions from "./childProfile/ProfileOptions.vue";

export default {
  name: "Profile",
  components: {
    NavBar,
    ProfileHeader,
    ProfileInfo,
    ProfileOptions
  },
  data() {
    return {
      orderList: [
        { icon: "@/assets/img/profile/message.png", info: "我的消息" },
        { icon: "@/assets/img/profile/pointer.png", info: "积分商城" },
        { icon: "@/assets/img/profile/vip.png", info: "会员卡" }
      ],
      serviceList: [
        { icon: "@/assets/img/profile/cart.png", info: "我的购物车" },
        { icon: "@/assets/img/profile/app.png", info: "下载购物APP" }
      ]
    };
  }
};
</script>

<style scoped>
.profile-bar {
  background-color: var(--color-tint);
  color: #fff;
}
</style>
